<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>出差表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="申请人" clearable v-model="eName" @clear="searchEvection">
            <el-button slot="append" icon="el-icon-search" @click="searchEvection"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="加班类型" clearable v-model="type" @clear="searchEvection">
            <el-button slot="append" icon="el-icon-search" @click="searchEvection"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="addEvectionFormVisible=true">添加出差记录</el-button>
        </el-col>
      </el-row>

      <el-table :data="evectionList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="员工编号" prop="eId" ></el-table-column>
        <el-table-column label="员工姓名" prop="eName" ></el-table-column>
        <el-table-column label="出差类型" prop="type" ></el-table-column>
        <el-table-column label="出差时间" prop="startTime" ></el-table-column>
        <el-table-column label="结束时间" prop="endTime" ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
    <div>
      <el-dialog title="添加加班记录" :visible.sync="addEvectionFormVisible" :close-on-click-modal="false">
        <el-form ref="addChannelFormRef" :rules="addEvectionFormRules" :model="addEvectionForm" label-width="80px" size="mini">

          <el-form-item label="员工工号" prop="eId">
            <el-input v-model="addEvectionForm.eId"></el-input>
          </el-form-item>
          <el-form-item label="员工姓名" prop="eName">
            <el-input v-model="addEvectionForm.eName"></el-input>
          </el-form-item>

          <el-form-item label="出差类型" prop="type">
            <el-input v-model="addEvectionForm.type"></el-input>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
                v-model="addEvectionForm.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="addEvectionForm.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddEvectionDialog">取 消</el-button>
          <el-button type="primary" @click="addEvection">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="修改出差记录" :visible.sync="modifyEvectionFormVisible" :close-on-click-modal="false">
        <el-form ref="addChannelFormRef" :rules="modifyEvectionFormRules" :model="modifyEvectionForm" label-width="80px" size="mini">

          <el-form-item label="员工工号" prop="eId">
            <el-input v-model="modifyEvectionForm.eId" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工姓名" prop="eName">
            <el-input v-model="modifyEvectionForm.eName" disabled></el-input>
          </el-form-item>

          <el-form-item label="出差类型" prop="type">
            <el-input v-model="modifyEvectionForm.type"></el-input>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
                v-model="modifyEvectionForm.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="modifyEvectionForm.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModifyEvectionDialog">取 消</el-button>
          <el-button type="primary" @click="modifyEvection">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Evection",
  data() {
    return {
      eId: '',
      eName: '',
      type: '',
      evectionList: [],
      addEvectionFormVisible: false,
      pageNum: 1,
      pageSize: 2,
      total: 0,

     // 添加表单
      addEvectionForm:{
        eId:'',
        eName:'',
        type:'',
        startTime:'',
        endTime:'',
      },
      addEvectionFormRules:{

      },


      //修改表单
      modifyEvectionForm:{
        eId:'',
        eName:'',
        type:'',
        startTime:'',
        endTime:'',
      },
      modifyEvectionFormVisible:false,
      modifyEvectionFormRules:{

      },

    }
  },
  methods: {
    searchEvection() {
      this.initEvection();
    },
    initEvection() {
      let url = this.$HRMSUrl + "/evection/evectionList";
      console.log(this.eName)
      this.$axios.get(url, {
        params: {
          eName: this.eName,
          type: this.type,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.evectionList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      }).catch(error => {
        this.$message({
          type: "error",
          message: "系统错误，请联系管理员！",
          duration: 1000
        })
      })
    },
    showEditDialog(row) {
      this.modifyEvectionForm = row;
      this.modifyEvectionFormVisible= true;
    },
    addEvection(){
      let url = this.$HRMSUrl + "/evection/add";
      console.log(this.addEvectionForm)
      this.$axios.post(url,this.addEvectionForm).then(
          res=>{
            if (res.data.code == 200){
              this.addEvectionFormVisible = false;
              this.addEvectionForm = {};
              this.initEvection();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }
          }).catch(error=>{
        this.$message({
          type:"error",
          message:"系统错误，请联系管理员!",
          duration:1000
        })
      })
    },
    cancelAddEvectionDialog(){
      this.addEvectionFormVisible = false;
      this.addEvectionForm = {}
    },
    removeById(id){
      let url = this.$HRMSUrl+"/evection/del/"+id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(url)
            .then(res=>{
              if (res.data.code == 200){
                this.initEvection();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.initEvection();
    },
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initEvection();
    },
    cancelModifyEvectionDialog(){
      this.modifyEvectionFormVisible = false;
    },
    modifyEvection(){
      let url = this.$HRMSUrl+"/evection/modify";
      this.$axios.put(url,this.modifyEvectionForm)
          .then(res=>{
            if (res.data.code == 200){
              this.modifyEvectionFormVisible = false ;
              this.initEvection();
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              })
            }
          }).catch(error=>{
        this.$message({
          type:"error",
          message:"系统错误，请联系管理员!",
          duration:1000
        })
      })
    },
  },
  created() {
    this.initEvection();
  },
}
</script>

<style scoped>

</style>